<template>
  <div class="visitor-alreadyVisited">
    <div class="search-group">
      <div class="input-wrap">
        <div class="label">单位名称:</div>
        <div class="input-item">
          <a-input allowClear :maxLength="30" clearable v-model="queryParam.companyName" placeholder="请填写" />
        </div>
      </div>
      <div class="input-wrap">
        <div class="label">车牌号码:</div>
        <div class="input-item">
          <a-input allowClear :maxLength="30" clearable v-model="queryParam.carNumber" placeholder="请填写" />
        </div>
      </div>
      <div class="input-wrap">
        <div class="label">车架号:</div>
        <div class="input-item">
          <a-input allowClear :maxLength="30" clearable v-model="queryParam.frameNumber" placeholder="请填写" />
        </div>
      </div>
      <div class="input-wrap">
        <div class="label">取车人员:</div>
        <div class="input-item">
          <a-input allowClear :maxLength="30" clearable v-model="queryParam.takeName" placeholder="请填写" />
        </div>
      </div>
      <div class="input-wrap">
        <div class="label">身份证号:</div>
        <div class="input-item">
          <a-input allowClear :maxLength="30" clearable v-model="queryParam.idCard" placeholder="请填写" />
        </div>
      </div>
      <div class="input-wrap">
        <div class="label">联系方式:</div>
        <div class="input-item">
          <a-input allowClear :maxLength="30" clearable v-model="queryParam.takePhone" placeholder="请填写" />
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">取车时间:</div>
        <div class="time-item">
          <start-end-time
            :times="times"
            :showTime="{ format: 'HH:mm:ss' }"
            format="YYYY-MM-DD HH:mm:ss"
            @timeChange="timeChange"
            :resetTime="resetTime"
          ></start-end-time>
        </div>
      </div>
      <div class="btn-wrap">
        <a-button class="searchBtn" @click="searchQuery()" type="primary"> 搜索 </a-button>
        <a-button class="resetBtn" @click="searchReset()" type="primary"> 重置 </a-button>
      </div>
    </div>
    <div>
      <a-table
        ref="table"
        rowKey="id"
        class="tableList"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <template slot="action" slot-scope="records">
          <span class="operation deatil-color" @click="handleDetail(records)">详情</span>
        </template>
      </a-table>
    </div>
    <RentDetail type="take" ref="rentDetailRef" />
  </div>
</template>

<script>
import startEndTime from '@/components/startEndTime'
import { JeecgListMixinNew } from '@/mixins/JeecgListMixinNew'
import { getCommunityList, getDictItemsFromCache, getSubordinateList } from '../../../api/api'
import RentDetail from './modules/rentDetail.vue'
import { handleSelectChange } from '../../../utils/util'
import moment from 'moment'
export default {
  name: 'room',
  components: { startEndTime, RentDetail },
  mixins: [JeecgListMixinNew],
  props: {
    idCode: {
      type: String,
      default: '',
    },
    villageList: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    idCode(newVal) {
      this.extendParams.policeAgencyId = newVal
    },
  },
  data() {
    return {
      url: {
        list: '/industry/webMachineRepairRecordPage',
      },
      publicVisible: false,
      disableMixinCreated: true,
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '单位名称',
          dataIndex: 'companyName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '车辆类型',
          dataIndex: 'carType',
          ellipsis: true,
          align: 'center',
          customRender: function (t, r, index) {
            return t == 1 ? '汽车' : '电动车/摩托车'
          },
        },
        {
          title: '车牌号',
          dataIndex: 'carNumber',
          ellipsis: true,
          align: 'center',
          customRender(t) {
            return t ? t : '暂无'
          },
        },
        {
          title: '车架号',
          dataIndex: 'frameNumber',
          ellipsis: true,
          align: 'center',
          customRender(t) {
            return t ? t : '暂无'
          },
        },
        // {
        //   title: '发动机编号',
        //   dataIndex: 'engineNumber',
        //   ellipsis: true,
        //   align: 'center',
        //   customRender(t) {
        //     return t ? t : '暂无'
        //   },
        // },
        {
          title: '取车人',
          dataIndex: 'takeName',
          ellipsis: true,
          align: 'center',
          customRender(t) {
            return t ? t : '暂无'
          },
        },
        {
          title: '身份证号',
          dataIndex: 'takeIdcard',
          ellipsis: true,
          align: 'center',
          width: 200,
        },
        {
          title: '取车时间',
          dataIndex: 'takeTime',
          ellipsis: true,
          align: 'center',
          width: 180,
          customRender: function (t, r, index) {
            return moment(t).format('YYYY/MM/DD HH:mm')
          },
        },
        {
          title: '取车上报时间',
          dataIndex: 'takeEscalationTime',
          ellipsis: true,
          align: 'center',
          width: 180,
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          ellipsis: true,
          align: 'center',
          width: 100,
        },
      ],
      project_company_type: [],
      times: {},
      buildingList: [],
      unitList: [],
      floorList: [],
      roomList: [],
      queryParam: {
        xQfDzbm: undefined,
        jzfDzbm: undefined,
        dyfDzbm: undefined,
        lcfDzbm: undefined,
        fjfDzbm: undefined,
        fIsCollective: undefined,
      },
      flagTypeList: [],
      extendParams: {
        isTake: 1,
      },
    }
  },
  mounted() {
    this.flagTypeList = getDictItemsFromCache('flag_type')
    this.initPage()
  },
  methods: {
    handleDetail(records) {
      this.$refs.rentDetailRef.show(records)
    },
    searchReset() {
      if (!this.idCode) {
        this.$message.error('请选择机关信息!')
        return
      }
      if (this.resetTime !== undefined) {
        this.resetTime = true
      }
      this.queryParam = {}
      this.loadData(1)
    },
    handleSelectChange,
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    searchQuery() {
      if (!this.idCode) {
        this.$message.error('请选择机关信息!')
        return
      }
      this.loadData(1)
    },
    timeChange(v, index) {
      if (index == 1) {
        this.queryParam.startTime = this.$moment(v).valueOf()
      } else {
        this.queryParam.endTime = this.$moment(v).valueOf()
      }
      if (v == null) {
        this.queryParam.startTime = null
        this.queryParam.endTime = null
      }
    },
    async initPage() {
      try {
        console.log(res)
      } catch (error) {
      } finally {
      }
    },
  },
}
</script>
